<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb>
      <el-breadcrumb-item to="/dashboard">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="user-container">
      <el-row>
        <el-col :span="8">
          <el-button type="danger" size="mini" icon="el-icon-delete-solid"
            >删除选中</el-button
          >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-circle-plus-outline"
            @click="handleAdd"
          >
            添加用户
          </el-button>
        </el-col>
        <el-col :span="8" :offset="8">
          <el-input v-model="keywords" placeholder="请输入需要查找的用户名">
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="handleSearch"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 数据表格 -->
      <el-table :data="users" stripe border>
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="用户名" prop="username"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scoped">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scoped.row.id)"
            >
              编辑
              <!-- <i class="el-icon-edit"></i>将图标显示在文字后面的方法 -->
            </el-button>
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="handleDeleteopen(scoped.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="size"
        layout="total,sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      :title="isEdit ? '修改用户' : '添加用户'"
      :visible.sync="dialogVisible"
    >
      <el-form :rules="rules" :model="form" label-width="80px" ref="form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="form.password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="OnSubmit">提交</el-button>
          <el-button type="primary" @click="resetForm('form')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="Warning!!!" :visible.sync="deleteVisible">
      <el-form>
        <el-form-item icon="el-icon-message-solid" label="是否删除该用户?">
          <!-- <i class="el-icon-message-solid"></i> -->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleDelete">确定</el-button>
          <el-button type="danger" @click="handleDeletecancle">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'User',
  data() {
    return {
      keywords: '',
      users: [
        { id: 1, username: 'zs' },
        { id: 2, username: 'zs1' },
        { id: 3, username: 'zs2' },
      ],
      page: 1, //当前页码数
      size: 5, //每页显示数据
      total: 0,
      dialogVisible: false,
      deleteVisible: false,
      form: {
        id: '',
        username: '',
        password: '',
      },
      id: '',
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
      },
      isEdit: true,
      // isSearch: false,
    }
  },
  created() {
    this.getUsers()
  },
  methods: {
    getUsers() {
      this.$http
        .get('/users', {
          params: { page: this.page, size: this.size },
        })
        .then((data) => {
          this.users = data.result.data
          this.total = data.result.total
        })
    },

    // 自定义方法
    // getSearch() {
    //   this.$http
    //     .get(
    //       `/users/search?page=${this.page}&size=${this.size}&keywords=${this.keywords}`
    //     )
    //     .then((res) => {
    //       this.users = res.result.data
    //       this.total = res.result.total
    //     })
    // },

    handleCurrentChange(p) {
      this.page = p

      // 重新获取新的分页数据
      this.getUsers()
    },
    handleSizeChange(s) {
      this.size = s
      this.getUsers()
    },
    handleAdd() {
      // this.$router.push('/user/useradd')
      this.dialogVisible = true

      this.isEdit = false
    },
    handleEdit(id) {
      // console.log(row)
      // 显示对话框
      this.dialogVisible = true

      // 修改状态
      this.isEdit = true

      // 获取数据
      // console.log(id)
      this.$http.get(`/users/${id}`).then((res) => {
        console.log(res)
        this.form = res.result
      })
    },
    OnSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.isEdit == false) {
            // 发送请求 POST
            this.$http.post('/users', this.form).then((data) => {
              console.log(data)
              const { code, message, result } = data
              if (code == 0) {
                this.$message.success(message)

                // 重新获取数据
                this.getUsers()
                // 关闭对话框
                this.dialogVisible = false

                // 清空表单数据
                this.$refs['form'].resetFields()
              }
            })
          } else {
            console.log(this.form.id)
            const id = this.form.id
            this.$http.put('/users/' + id, this.form).then((res) => {
              const { code, message } = res
              if (code == 0) {
                this.$message.success(message)
                console.log(res)
                this.dialogVisible = false
                this.getUsers()
                //清空表单数据
                this.$refs['form'].resetFields()
              }
            })
          }
        }
      })
    },
    resetForm(form) {
      this.$refs[form].resetFields()
    },
    handleDeleteopen(id) {
      // console.log(a)
      this.id = id
      this.deleteVisible = true
    },
    handleDelete() {
      this.$http.delete(`/users/${this.id}`).then((res) => {
        const { code, message } = res
        if (code == 0) {
          this.$message.success(message)
          console.log(res)
          // 重新获取数据
          this.getUsers()
          this.deleteVisible = false
        }
      })
    },
    handleDeletecancle() {
      this.deleteVisible = false
    },
    handleSearch() {},
  },
}
</script>

<style scoped>
/* scoped(作用域):在这里写的样式仅仅会影响当前组件 */
.user-container {
  margin-top: 20px;
  min-width: 700px;
}
.el-table {
  margin-top: 20px;
}
</style>
